<template>
	<div class="main">
		<div class="main-header" style="justify-content: space-between;flex-wrap: wrap;">
			<!-- <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            > -->
			<div style="display: flex;flex-wrap: wrap;">
				<el-input placeholder="请输入商家名称/会员昵称/订单号/电话号码" style="width: 290px;margin-right: 10px;"
					v-model="searchParamCp.keyword" size="mini" clearable>
				</el-input>
				<!-- 订单列表筛选加一个支付方式筛选pay_type 2微信支付 3优生活余额支付 4账户余额支付 -->
				<el-select v-model="searchParamCp.pay_type" size="mini" placeholder="请选择支付方式"
					style="width: 170px;margin-right: 10px;">
					<el-option v-for="item in paytypelist" :key="item.id" :label="item.title" :value="item.id">
					</el-option>
				</el-select>
				<!-- <el-select v-model="searchParamCp.pay_status" size="mini" placeholder="请选择支付状态"
					style="width: 170px;margin-right: 10px;">
					<el-option v-for="item in paylist" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select> -->
				<el-select v-model="searchParamCp.order_type" size="mini" placeholder="请选择订单类型"
					style="width:170px;margin-right: 10px;">
					<el-option v-for="(item, index) in $store.getters.order_type" :value="index"
						:label="item"></el-option>
				</el-select>
				<el-select v-model="searchParamCp.status" size="mini" placeholder="请选择订单状态"
					style="width: 170px;margin-right: 10px;">
					<el-option v-for="item in typelist" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
				<!-- <el-select v-model="searchParamCp.settle_status" size="mini" placeholder="请选择结算状态"
					style="width: 170px;margin-right: 10px;">
					<el-option v-for="(item,index) in settlementlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select> -->
				<div class="timepick" style="width: 330px;margin-right: 10px;">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>
			<div>
				<el-button type="primary" style="margin-top: 10px;" size="mini" @click="exportExcel">导出</el-button>
			</div>
		</div>
		<!--  :summary-method="getSummaries" show-summary -->
		<el-table ref="table" class="main-table" :data="memberData" height="86%" border
			header-cell-class-name="main-table-header" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="39"></el-table-column>
			<el-table-column label="商家角色">
				<template slot-scope="{row}">
					{{ $store.getters.rule_type[row.rule_type] }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="商家名称" prop="merch_name" width="180px" />
			<el-table-column align="center" label="会员昵称" prop="wxName" />
			<el-table-column align="center" label="订单号" prop="order_sn" width="180px" />
			<el-table-column width="120px" align="center" label="电话号码" prop="mainPhone" />
			<el-table-column align="center" width="120px" label="订单总金额" prop="total_money" />
			<!-- <el-table-column align="center" width="100px" label="运费" prop="freight_money" /> -->
			<el-table-column align="center" label="支付金额" prop="pay_money" width="120px" />
			<el-table-column align="center" label="下单时间" prop="addtime" width="180px">
				<template slot-scope="{row}">
					{{ row.addtime | formatDate }}
				</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="支付时间" prop="pay_time" width="180px">
				<template slot-scope="{row}">

					<span v-if="row.pay_time">{{ row.pay_time | formatDate }}</span>
				</template>
			</el-table-column> -->
			<el-table-column align="center" label="订单状态" prop="status" width="180px">
				<template slot-scope="{row}">
					<!-- status订单状态 0待付款 1待发货/待核销/待派单 2待收货/已核销/已派单 3待评价  4已取消  5售后退款中  6已完成  7售后完成  -->
					<!-- // 0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成 -->
					<el-tag v-if="row.status == 0">待付款</el-tag>
					<el-tag v-if="row.status == 2&&row.order_type == 1">待收货</el-tag>
					<el-tag v-if="row.status == 2&&(row.order_type == 4||row.order_type == 5)">已核销</el-tag>
					<el-tag v-if="row.status == 2&&row.order_type == 3">已派单</el-tag>
					<!-- <el-tag v-if="row.status == 2&&row.order_type == 2">已完成</el-tag> -->
					<el-tag v-if="row.status == 7" type="success">售后完成</el-tag>
					<el-tag v-if="row.status == 6" type="success">已完成</el-tag>
					<el-tag v-if="row.status == 4" type="info">已取消</el-tag>
					<el-tag v-if="row.status == 1&&row.order_type == 1" type="warning">待发货</el-tag>
					<!-- <el-tag v-if="row.status == 1&&row.order_type == 2" type="warning">待发货/待核销/待派单</el-tag> -->
					<el-tag v-if="row.status == 1&&row.order_type == 3" type="warning">待派单</el-tag>
					<el-tag v-if="row.status == 1&&row.order_type == 2" type="warning">已完成</el-tag>
					<el-tag v-if="row.status == 1&&(row.order_type == 4||row.order_type == 5)"
						type="warning">待核销</el-tag>
					<el-tag v-if="row.status == 3" type="warning">待评价</el-tag>
					<el-tag v-if="row.status == 5" type="danger">售后退款中</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单类型" prop="order_type" width="120px">
				<template slot-scope="{row}">
					<!-- //delivery_method =1配送订单delivery_method =2自提订单-->
					<!-- order_type1 商品订单  2到店支付订单   这个是订单类型 -->
					<el-tag v-if="row.order_type == 1">商品</el-tag>
					<el-tag v-if="row.order_type == 2" type="success">到店</el-tag>
					<el-tag v-if="row.order_type == 3" type="danger">外卖</el-tag>
					<el-tag v-if="row.order_type == 4" type="warning">自提</el-tag>
					<el-tag v-if="row.order_type == 5" type="info">团购</el-tag>
				</template>
			</el-table-column>
			<!-- pay_type 1积分支付 2微信支付  3POS余额支付 4账户余额支付 -->
			<el-table-column align="center" label="支付方式" prop="pay_type" width="130px">
				<template slot-scope="{row}">
					<el-tag v-if="row.pay_type == 1">积分支付</el-tag>
					<el-tag v-if="row.pay_type == 2" type="success">微信支付</el-tag>
					<el-tag v-if="row.pay_type == 3" type="danger">优生活余额</el-tag>
					<el-tag v-if="row.pay_type == 4" type="warning">账户余额</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付状态" prop="pay_status" width="120px">
				<template slot-scope="{row}">
					<!-- // 0未支付 1已支付 -->
					<el-tag v-if="row.pay_status == 1" type="success">已支付</el-tag>
					<el-tag v-if="row.pay_status == 0" type="warning">未支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="180px" fixed="right">
				<template slot-scope="{row}">
					<el-button type="primary" @click="onCheck(row)">详情</el-button>
					<!-- && row.pay_status !== 1 && row.status == 1 ? false : true&&row.order_type !== 1 delivery_method-->
					<el-button v-if="$auth('发货')" type="primary"
						:disabled="row.delivery_method!==1||row.pay_status == 0||row.order_type== 2||row.order_type== 3||row.status!==1||row.store_id==32"
						@click="sentgoods(row)">发货
					</el-button>
					<el-button type="primary" style="margin-top: 10px;"
						:disabled="row.pay_status == 0||row.order_type == 1||row.order_type == 2||row.status!== 1||row.delivery_method==2"
						@click="sentorder(row)">派单</el-button>
					<el-button type="primary" style="margin-top: 10px;" :disabled="row.order_no==null||row.order_no==''"
						@click="downLoad(row)">回单下载</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="amountto" v-if="statistics">
			<div class="titlebox">合计：总金额：<span>{{ formatNumberWithComma((statistics.total_money).toFixed(2)) }}</span>元</div>
			<div class="titlebox">支付金额：<span>{{ formatNumberWithComma((statistics.pay_money).toFixed(2)) }}</span>元</div>
			<!-- <div class="titlebox">优惠金额：<span>{{ (statistics.discounts_money).toFixed(2) }}</span>元</div> -->
		</div>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
		<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="800px"
			@close="onDialogClose">
			<component :is="dialogView" @update="getMemberData" @search="search" :id="orderid" @send="send"></component>
		</el-dialog>
		<!-- <Info ref="info" :formData="orderinfo" @close="onDialogClose" /> -->
	</div>
</template>

<script>
	import {
		get,
		post
	} from "@/assets/js/http.js";

	export default {
		name: "view-member",
		data() {
			return {
				memberData: [],
				selection: [],
				page: 1,
				limit: 20,
				total: 0,
				dialogVisible: false,
				dialogTitle: "",
				dialogView: "",
				searchinfo: {
					keyword: '',
					search_time: [],
					status: '',
					pay_status: '',
					pay_type: '',
					settle_status:'',
				},
				searchParamCp: {},
				paylist: [{
					id: 0,
					label: '未支付'
				}, {
					id: 1,
					label: '已支付'
				}], // 0未支付 1已支付
				typelist: [{
					id: 0,
					label: '待付款'
				}, {
					id: 1,
					label: '待发货/待核销/待派单'
				}, {
					id: 2,
					label: '待收货/已核销/已派单'
				}, {
					id: 3,
					label: '待评价'
				}, {
					id: 4,
					label: '已取消'
				}, {
					id: 5,
					label: '售后退款中'
				}, {
					id: 6,
					label: '已完成'
				}, {
					id: 7,
					label: '售后完成'
				}], //status订单状态 0待付款 1待发货/待核销/待派单 2待收货/已核销/已派单 3待评价  4已取消  5售后退款中  6已完成  7售后完成
				orderid: '', //订单详情
				statistics: {},
				paytypelist: [{
					id: 2,
					title: '微信支付'
				}, {
					id: 3,
					title: '优生活余额支付'
				}, {
					id: 3,
					title: '账户余额支付'
				}], //pay_type 2微信支付 3优生活余额支付 4账户余额支付
				settlementlist:['待结算','待审核','待支付','已支付'],//settle_status 0待结算 1待审核 2待支付 3已支付
			};
		},
		computed: {
			buttons() {
				return this.$store.state.buttons;
			}
		},
		updated() {

			this.$nextTick(() => {

				this.$refs.table.doLayout();

			});

		},
		components: {
			Sent: () => import("./sent.vue"),
			Search: () => import("./search.vue"),
			Info: () => import("./info.vue")
		},
		mounted() {
			this.getMemberData();
		},
		methods: {
			formatNumberWithComma(number) {
			  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			},
			async downLoad(row) {
				// this.$loading()
				await post({
					export: true,
					url: '/api/lklpay/receiptQuery',
					data: {
						order_no: row.order_no, //row.order_no,
					}
				}).then(res => {
					console.log(res, 'res')
					window.open(`https://zdcloud.zxkjnc.com/api/lklpay/download?file_no=${res[0].file_no}`)
					if (res.length == 2) {
						setTimeout(() => {
							window.open(
								`https://zdcloud.zxkjnc.com/api/lklpay/download?file_no=${res[1].file_no}`
								)
						}, 1500)
					}
				})
				// let a = document.createElement('a');
				// var url = URL.createObjectURL(res);
				// a.href = url;
				// a.download = 's.pdf'
				// a.click();
				// this.$loading().close()
				// window.open(`https://zdcloud.zxkjnc.com/api/wechat/downloadOrder?order_no=${row.order_no}`)
			},
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 1) {
						sums[index] = '总计';
						return;
					}
					if (index === 6) {
						sums[index] = '总金额：' + this.statistics.total_money + '元';
						return;
					}
					if (index === 7) {
						sums[index] = '支付金额：' + this.statistics.pay_money + '元';
						return;
					}
					// if (index === 8) {
					// 	sums[index] = '优惠金额：' + this.statistics.discounts_money + '元';
					// 	return;
					// }
				});
				return sums;
			},
			search(result) {
				this.page = 1;
				console.log(result);
			},
			searchs() {
				this.page = 1
				this.searchinfo = {
					...this.searchinfo,
					...this.searchParamCp
				}
				this.getMemberData()
			},
			//发货
			send(result) {
				const data = {
					id: result.id,
					take_num: result.take_num,
					ship_id: result.ship_id
				}
				post({
					url: '/admin/order.Order/shipPost',
					data,
					successTip: true,
				}).then(res => {
					this.getMemberData()
				})
			},
			reset() {
				this.page = 1
				this.searchParamCp = {}
				this.searchinfo = {
						keyword: '',
						search_time: [],
						status: '',
						pay_status: '',
						pay_type: '',
						settle_status:'',
					},
					this.getMemberData()
			},
			async getMemberData() {
				const data = await get({
					url: "/admin/order.Order/index",
					loading: true,
					params: {
						page: this.page,
						limit: this.limit,
						...this.searchinfo,
						...{
							search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
								' - ') : ''
						}
					}
				});
				const list = data.list;
				this.total = data.total;
				this.statistics = data.statistics
				list.forEach(item => {
					item.firstCostDate = item.firstCostDate?.slice(0, 10);
					item.latestCostDate = item.latestCostDate?.slice(0, 10);
				});
				this.memberData = list;
			},
			//导出
			async exportExcel() {
				this.$loading()
				let res = await get({
					export: true,
					url: '/admin/order.Order/export',
					params: {
						...this.searchinfo,
						...{
							search_time: this.searchinfo.search_time && this.searchinfo.search_time
								.length ? this.searchinfo.search_time.join(' - ') : ''
						}
					}
				})
				let a = document.createElement('a');
				var url = URL.createObjectURL(res);
				a.href = url;
				a.click();
				this.$loading().close()
			},

			onCurrentChange(index) {
				this.page = index;
				this.getMemberData();
			},
			//详情
			onCheck(row) {
				// this.dialogTitle = "查看客户照片";
				// this.dialogView = "Photo";
				// this.dialogView = "Info";
				// this.dialogVisible = true;
				this.orderid = row.id
				this.dialogVisible = true;
				this.dialogView = "Search";
			},
			sentgoods(row) {
				this.orderid = row.id
				this.dialogView = "Sent"
				this.dialogVisible = true;
			},
			onSearch() {
				this.dialogTitle = "搜索";
				this.dialogView = "Search";
				this.dialogVisible = true;
			},
			onSelectionChange(selection) {
				this.selection = selection;
			},
			onRowClick(row) {
				this.$refs.table.toggleRowSelection(row);
				this.$refs.info.show();
			},
			onDialogClose() {
				this.orderid = ''
				this.$refs.table.clearSelection();
			},
			tapButton(item) {
				if (item.path === "check") {
					this.onCheck();
				} else if (item.path === "search") {
					this.onSearch();
				}
			},
			//派单
			sentorder(row) {
				this.$confirm('是否确认派单?', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					get({
						url: '/admin/order.Order/sendOrder',
						params: {
							id: row.id,
						},
						successTip: true,
					}).then(res => {
						this.getMemberData()
					})
				}).catch(action => {
					if (action === 'cancel') {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					} else {

					}

				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.timepick {
		width: 360px;
		margin-right: 10px;
	}

	.amountto {
		height: 4%;
		display: flex;
		align-items: center;
		color: #606266;
		font-size: 12px;
	
		.titlebox {
			margin-right: 50px;
	
			>span {
				color: #606266;
			}
		}
	}
</style>